import React from 'react';
import { Button, Spin, Tag } from 'antd';
import styles from '@/pages/Dialog/Add/index.less';
import UserSession from '@/UserSession';

class WordTrough extends React.Component{

  componentDidMount() {

  }

  render() {
    const { slotList,slotLoading } = this.props;
    return (
      <div>
        <div>相关词槽（当前多轮对话会用到的词槽）：</div>
        <div style={{marginTop:10}}>
          <Spin spinning={slotLoading}>
            {
              slotList.map(tag => {
                return <Tag
                  closable={!UserSession.isSystemKnowledge()}
                  className={styles.slotItem}
                  onClose={e => {
                    e.preventDefault();
                    this.props.handleDelSlot(tag);
                  }}
                  key={tag.key}
                >
                  {tag.name}-{tag.key}
                </Tag>
              })
            }
            <Button
              htmlType="button"
              type="primary"
              size="small"
              onClick={this.props.addSlot}
              className={styles.addSlotBtn}
              disabled={UserSession.isSystemKnowledge()}
            >
              添加词槽
            </Button>
          </Spin>
          <div style={{margin:'10px 0'}}>
            <Button type={'primary'} onClick={this.props.closeSlotDialog} disabled={UserSession.isSystemKnowledge()}>保存</Button>
          </div>
        </div>
      </div>
    );
  }
}

export default WordTrough;
